import 'dart:math';

import 'package:flutter/material.dart';
import 'package:mall_b_and_o/detail.dart';
import './models/category.dart';
import './models/product.dart';
import 'extensions/color_hex.dart';
import 'extensions/color_random.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'b&o_mall', //标题
      theme: ThemeData(
        primarySwatch: Colors.blue, //主题背景色
      ),
      debugShowCheckedModeBanner: false, //移除debug标记
      home: MyHomePage(title: 'b&o_mall'), //主页入口 ，传入标题参数
    );
  }
}

//有状态的statefulWidget
class MyHomePage extends StatefulWidget {
  // 传入的参数 及 继承
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState(); //重写构造state
}

class _MyHomePageState extends State<MyHomePage> {
  /// 分类列表  里面是两个对象
  List<Category> _categoryList = [
    Category.speak(),
    Category.headphone(),
  ];

  /// 默认的选中对象下标 0
  int _selectedIndex = 0;

  ///重写state 下的 widget
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        title: Text(
          'b&o_mall',
          style: TextStyle(color: Colors.black87),
        ),

        /// appBar 左侧 插槽
        leading: IconButton(
            onPressed: () => {},
            icon: Icon(
              Icons.menu,
              color: Colors.black87,
            )),
      ),
      body: Container(
          // 滚动页面
          child: CustomScrollView(
        slivers: [
          // 滚动子组件 由于不是在固定头部的子组件里，所以它不会出现粘性布局
          SliverToBoxAdapter(
              // 含有内边距的组件   有意思 什么组件都有
              child: Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Text(
                    '按分类浏览',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.black87,
                        fontSize: 18),
                  ))),
          SliverToBoxAdapter(
            // 普通盒子
            child: Container(
              height: 248,
              // 横向列表
              child: ListView.builder(
                // 创建列表  循环方法
                itemBuilder: (builder, index) {
                  return categoryCard(_categoryList[index]);
                },
                // 子元素数目
                itemCount: _categoryList.length,
                // 滚动方向   水平
                scrollDirection: Axis.horizontal,
              ),
            ),
          ),
          SliverToBoxAdapter(
            /// 占位盒
            child: SizedBox(
              height: 20,
            ),
          ),

          /// 标题盒
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Text(
                '猜你喜欢',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black87,
                    fontSize: 18),
              ),
            ),
          ),

          /// 子元素盒
          SliverPadding(
            ///边距内容
            padding: EdgeInsets.fromLTRB(
                15, 15, 15, MediaQuery.of(context).padding.bottom + 15),
            sliver: SliverGrid(
              /// 宫格
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, //横向最大数值
                  childAspectRatio: 145 / 209,
                  crossAxisSpacing: 15, //横轴间隔
                  mainAxisSpacing: 15 //主轴间隔

                  ),
              // 创建子宫格
              delegate: SliverChildBuilderDelegate((ctx, index) {
                return productCard(
                    _categoryList[_selectedIndex].products[index]);
              }, childCount: _categoryList[_selectedIndex].products.length),
            ),
          )
        ],
      )),
    );
  }

// 分类子组件
  Widget categoryCard(Category category) {
    double width = 235;
    double height = 248;
    double imageWidth = 205;

    return GestureDetector(
      onTap: () => {
        ///  indexWhere  dart  语法  返回数组中第一个返回条件的索引 ，其内可传函数
        setState(() => {
              _selectedIndex =
                  _categoryList.indexWhere((element) => category == element)
            })

        ///当传入的 ele 等于 该对象 category 的时候， 返回当前目标索引
      },
      child: Container(
        // 设置对称方向填充  水平 15   意思是左右 内边距 15
        padding: EdgeInsets.symmetric(horizontal: 15),
        width: width,
        height: height,

        ///类似设置了一个 position:relative 的父盒子
        child: Stack(
          children: [
            // 对，这是设置了 position:absolute 的子盒
            Positioned(
                bottom: 0,

                ///图片组件 组件内必须要有Image 地址，这里用的是本地地址，需要在yaml里设置本地路径地址
                child: Image(
                  image: AssetImage('images/bg_card.png'),
                  width: imageWidth,
                  height: 200,
                )),
            Positioned(
                //同上
                child: Image(
              image: AssetImage(category.image),
              width: imageWidth,
              height: 160,
            )),
            Positioned(
                bottom: 24,
                child: Container(
                    width: imageWidth,
                    // 竖向组件
                    child: Column(
                      children: [
                        Text(
                          category.name,

                          ///名
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18,
                              color: HexColor.fromHex('171717')),
                        ),
                        SizedBox(height: 6),
                        Text(
                          category.intro,

                          ///简介
                          style:
                              TextStyle(fontSize: 13, color: Colors.blueGrey),
                        )
                      ],
                    )))
          ],
        ),
      ),
    );
  }

// 产品子组件
  Widget productCard(Product product) {
    // 拥有点击事件的盒子
    return GestureDetector(
        onTap: () {
          /// 创建路由页面 将product 传入  同时设置了 transition 组件对象 用来设置渐入渐出效果
          Navigator.push(context, PageRouteBuilder(
              pageBuilder: (context, animation, secondaryAnimation) {
            return FadeTransition(
              opacity: animation as Animation<double>,

              /// 这里的 productDetailPage 是引入文件的 组件页面
              child: productDetailPage(product: product),
            );
          }));
        },
        child: Container(
          ///盒子装饰 类似于 style
          decoration: BoxDecoration(

              /// 圆角  四处圆角
              borderRadius: BorderRadius.circular(32),
              color: HexColor.fromHex('F3F6F8')),
          width: 200,
          height: 200,
          child: Column(
            children: [
              Image(image: AssetImage(product.image)),
              Padding(
                // 内边距 水平方向 左右
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Text(
                  product.name,
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              Text('￥${product.formatPrice()}',
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                      color: Colors.black87))
            ],
          ),
        ));
  }
}
